<template>
  <acme-popup v-model="showPopup" :styles="{width: '580rpx', height: '800rpx', borderRadius: '16rpx'}"
    :clickOverlayClose="false"
  >
    <view class="panel-c">
      
    </view>
    <view class="iconfont cancel" @click="cancel">&#xe639;</view>
  </acme-popup>
</template>

<script>
  export default {
    props: {
      value: Boolean,
      exIndex: Number
    },
    watch: {
      value(show) {
        this.showPopup = show
      },
      showPopup(show) {
        if(!show) {
          this.closePopup()
        }
      }
    },
    data() {
      return {
        showPopup: false
      }
    },
    methods: {
      closePopup() {
        this.$emit('input', false)
      },
      cancel() {
        this.closePopup()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .popup {
    .panel-c {
      width: 100%;
      height: 100%;
      background-image: url(../../../static/poster/psketch-2.png);
      background-size: 100% 100%;
      border-radius: 10upx;
    }
    
    .cancel {
      width: 54upx;
      height: 54upx;
      line-height: 54upx;
      text-align: center;
      position: absolute;
      bottom: -90upx;
      left: 0;
      right: 0;
      margin: auto;
      color: #F7F7F7;
      font-weight: 500;
      border-radius: 50%;
      border: 2upx solid #F7F7F7;
    }
  }
</style>